<template>
	<view>
		<MenuItem v-for="(item, index) in menuList1" :key="index" :item="item" @cancleAll="cancleAll(item)" />
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, watch } from 'vue';
	import MenuItem from './MenuItem.vue'; // 将菜单项组件分离到一个单独的文件中
	import { ProductListType, StyleImg } from '../types/types'
	import { getProduct, getProductStyle } from '../api/productList.js'
	import { useCommonStore } from '../stores/useCommonStore';

	import { onLoad, onShow, onTabItemTap } from '@dcloudio/uni-app'
	import { useI18n } from 'vue-i18n'
	const { t } = useI18n()
	// 定义接收的props
	const props = defineProps({
		pageInfo: {
			type: Object,
			required: true
		}
	});
	// 定义要向父组件发送的事件
	const emit = defineEmits(['updatePageInfo']);

	// 本地状态
	const loading = ref(false);
	const hasMore = ref(true);

	const product_id = ref("")
	const commonStore = useCommonStore();
	// onLoad((options : { id ?: string }) => {
	// 	// 获取 URL 参数中的 id
	// 	if (Object.prototype.hasOwnProperty.call(options, 'id')) {
	// 		product_id.value = options.id || '' // 空值也赋值
	// 	}
	// })
	//获取产品的参数
	const params = ref({
		current: 1,
		lang: uni.getStorageSync('lang'),
		productIdCode: ''
	});
	// 搜索页跳转过来获取对应产品
	const params3 = ref({
		current: 1,
		lang: uni.getStorageSync('lang'),
		productIdCode: ''
	});
	// 获取款式的参数
	const params2 = ref({
		lang: uni.getStorageSync('lang'),
		productId: ''
	});

	// 定义要向父组件发送的事件
	// const emit = defineEmits(['update']);
	const cancleAll = (nowItem : ProductListType) => {
		const clearSelection = (items : ProductListType[]) => {
			items.forEach((item : ProductListType) => {
				// 清除所有项的选中状态
				item.isSelected = false;
				// 递归清除子项的选中状态
				// if (item.children) {
				// 	clearSelection(item.children);
				// }
			});
		};
		// 清除所有项的选中状态
		clearSelection(menuList1.value);

		// 只设置当前点击项的选中状态（如果是叶子节点）
		// if (!nowItem.children) {
		// 	nowItem.isSelected = true;
		// }
	}
	let menuList1 = ref<ProductListType[]>([])
	// 监听store中productIdCode的变化并同步到本地状态
	watch(() => commonStore.productIdCode, (newVal) => {
		if (newVal) {
			isStoreUpdating.value = true; // 设置标志位
			params3.value.productIdCode = newVal
			getMenuList(params3.value)
			commonStore.setTipsWord(true)
		}
		// else {
		// 	// getMenuList(params.value);
		// 	getMenuList({ ...params.value, current: 1 });
		// }
	},
		{ deep: true, immediate: true },// 深度监听数组内部变化
	)
	// 避免重复调用的标志位
	const isStoreUpdating = ref(false);
	let lastStoreValue = ref(''); // 记录store上一次的值
	
	// 0715  onShow改为onLoad
	onLoad(() => {
		product_id.value = commonStore.nowSelectedId || ''
		// 获取当前store的值
		const currentStoreValue = commonStore.productIdCode;
		// 只有当store没有变化时，才执行onShow中的逻辑
		if (!isStoreUpdating.value && currentStoreValue === lastStoreValue.value) {
			getMenuList({ ...params.value, current: 1 });
			commonStore.setTipsWord(false)
		}// 如果当前值存在，也尝试拉取一次
		else if (currentStoreValue && !isStoreUpdating.value) {
			params3.value.productIdCode = currentStoreValue;
			getMenuList(params3.value);
			commonStore.setTipsWord(true)
		} else {
			// 更新lastStoreValue为当前值
			lastStoreValue.value = currentStoreValue;
		}
	})
	

	// 监听 store 变化，深拷贝数据并添加 isSelected 属性
	watch(() => commonStore.menuList, (newList) => {
		if (newList && newList.length > 0) {
			// 创建深拷贝，避免直接修改 store 数据
			const updatedList = JSON.parse(JSON.stringify(newList));
			// 只有当 product_id 为空时，才默认选中第一个
			if (!product_id.value) {
				updatedList[0].isSelected = true;
			}
			menuList1.value = updatedList;
		} else {
			menuList1.value = [];
		}
	}, { immediate: true }); // 立即执行一次

	//获取产品列表
	async function getMenuList(customParams : { current : number; lang : string; productIdCode ?: string }) {
		// 更新加载状态
		loading.value = true;

		// 合并默认参数和自定义参数
		const finalParams = {
			current: 1,
			...customParams
		};

		if (uni.getStorageSync('lang') == "") {
			finalParams.lang = "cn"
		} else {
			finalParams.lang = uni.getStorageSync('lang')
		}
		try {
			const response = await getProduct(finalParams)
			if (response && response.code == 200 && response.msg == "success") {
				if (response.data) {
					hasMore.value = response.data.length >= 24;
				} else {
					hasMore.value = false
					// "暂无产品"
					uni.showToast({
						title: t('noProducts'),
						icon: 'none',
						duration: 1000
					})
				}
				// 更新分页信息
				emit('updatePageInfo', {
					currentPage: finalParams.current,
					hasMore: hasMore.value
				});
				// 处理数据
				if (finalParams.current === 1) {
					// 第一页数据直接替换
					commonStore.setMenuList(response.data);
					if (commonStore.menuList && commonStore.menuList.length > 0) {
						commonStore.menuList[0].isSelected = true
					}
					// 默认展示第一个
					if (response.data && response.data.length > 0) {
						commonStore.select(response.data[0].productId);
						params2.value.productId = response.data[0].productId
						getStyleList(params2.value);
					}
				} else {
					// 非第一页数据追加到现有数据后面
					const currentList = JSON.parse(JSON.stringify(commonStore.menuList));
					commonStore.setMenuList([...currentList, ...response.data]);
				}
				// 将数据存入 store
				// commonStore.setMenuList(response.data);
				// 直接从 store 获取 menuList
				menuList1.value = commonStore.menuList;
				isStoreUpdating.value = false  //标志位回复 保证onshow
				// 更新lastStoreValue为最新值
				lastStoreValue.value = commonStore.productIdCode;
			} else {
				uni.showToast({
					title: response.msg,
					icon: 'none', // 确保能显示完整错误信息
					duration: 1000 // 适当延长显示时间
				});
				// 加载失败时回退页码
				if (finalParams.current > 1) {
					emit('updatePageInfo', {
						current: finalParams.current - 1,
						hasMore: true
					});
				}
			}
		} catch (error) {
			let errorMsg = t('loadFail');
			// 尝试从错误对象中获取更具体的信息
			if (error.message) {
				errorMsg += error.message;
			} else if (typeof error === 'string') {
				errorMsg += error;
			}
			uni.showToast({
				title: errorMsg,
				icon: 'none', // 确保能显示完整错误信息
				duration: 1000 // 适当延长显示时间
			});
			// 加载失败时回退页码
			if (finalParams.current > 1) {
				emit('updatePageInfo', {
					current: finalParams.current - 1,
					hasMore: true
				});
			}
		} finally {
			// 无论成功或失败都更新加载状态
			loading.value = false;
		}
	}

	const styleList = ref<StyleImg[]>([])
	//获取默认第一个产品的款式列表
	async function getStyleList(customParams : { lang : string; productId : string }) {
		const finalParams = {
			...customParams
		};
		if (uni.getStorageSync('lang') == "") {
			finalParams.lang = "cn"
		} else {
			finalParams.lang = uni.getStorageSync('lang')
		}

		try {
			const response = await getProductStyle(finalParams)
			if (response.code == 200 && response.msg == "success") {
				styleList.value = response.data; // 更新styleList为接口返回的数据
				// 将数据存入 Pinia 而不是本地 ref
				commonStore.setStyleList(styleList.value);
			} else {
				styleList.value = []
				commonStore.setStyleList(styleList.value);
				uni.showToast({
					title: response.msg,
					icon: 'none', // 确保能显示完整错误信息
					duration: 1000 // 适当延长显示时间
				});
			}
		} catch (error) {
			// let errorMsg = '加载失败:';
			let errorMsg = t('loadFail');
			// 尝试从错误对象中获取更具体的信息
			if (error.message) {
				errorMsg += error.message;
			} else if (typeof error === 'string') {
				errorMsg += error;
			}
			uni.showToast({
				title: errorMsg,
				icon: 'none', // 确保能显示完整错误信息
				duration: 1000 // 适当延长显示时间
			});
		}
	}

	defineExpose({
		getMenuList // 暴露方法供父组件访问
	})
</script>

<style scoped lang="less"></style>